<template>
  <div>
    <van-cell-group v-for="item in lists" :key="item">
      <van-cell
        center
        :icon="item.img"
        :title="item.title"
        :value="item.value"
        :label="item.label"
      />
    </van-cell-group>
  </div>
</template>

<script setup>
const lists = [
  {
    title: "视频旗舰店",
    value: "星期一",
    img: "/images/avatar1.jpg",
    label: "您有一条店铺消息"
  },
  {
    title: "视频旗舰店",
    value: "星期二",
    img: "/images/avatar2.jpg",
    label: "您有一条店铺消息"
  },
  {
    title: "视频旗舰店",
    value: "星期三",
    img: "/images/avatar3.png",
    label: "您有一条店铺消息"
  },
  {
    title: "视频旗舰店",
    value: "星期四",
    img: "/images/avatar4.png",
    label: "您有一条店铺消息"
  }
];
</script>

<style lang="less" scoped>
:deep(.van-cell) {
  .van-cell__left-icon {
    width: 40px;
    height: 40px;
    .van-icon__image {
      width: 100%;
      height: 100%;
    }
  }
  .van-cell__title {
    .van-cell__label {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 165px;
    }
  }
}
</style>
